import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter } from 'react-router-dom'
// import Home from './home'
// import About from './about'
const Home = React.lazy(() => import(/* webpackChunkName:"home"*/'./home'))
const About = React.lazy(() => import(/* webpackChunkName:"about"*/'./about'))


class App extends React.Component {
  state = {
    flag: true
  }
  fn = () => {
    this.setState({
      flag: !this.state.flag
    })
  }
  render() {
    return <div className=''>
      <button onClick={this.fn}>按钮</button>
      <React.Suspense fallback={<h3>加载中</h3>}>
        {
          this.state.flag ? <Home /> : <About />
        }
      </React.Suspense>
    </div>;
  }
}

ReactDOM.render(<HashRouter><App /></HashRouter>, document.getElementById('root'))